<html>
  <head></head>
  <body>
    <div id="game"></div>
    <script src="https://raw.githubusercontent.com/craftyjs/Crafty-Distro/nightlies/crafty.js"></script>
    <script src="https://raw.githubusercontent.com/craftyjs/demos/master/devDemos/isometric/iso-engine.js"></script>
    <script>
    Crafty.init(600, 600);
    Crafty.background('gray');

    Crafty.sprite(128, 64, "https://raw.githubusercontent.com/craftyjs/demos/master/devDemos/isometric/iso-sprites.png", {
        block: [0,0,1,2],
        player: [1,0,1,2],
        tower: [2,0,1,4],
        big: [0,2,2,3],
        plane: [2,4,1,1]
    });

    // TILSESIZE
    var size = 64;

    // TILES
    var simple = {c: "Solid, Collision", i: "DOM, block, IsometricTileAreaMap, IsometricTileDraggable"};
    var big = {w: 2, h: 2, c: "Solid, Collision", i: "DOM, big, IsometricTileAreaMap, IsometricTileDraggable"};
    var plane = {d: 0, i: "DOM, plane, IsometricTileAreaMap, IsometricTileDraggable"};

    // MAIN TILE MAP
    var map = [ [], [], [], [] ]; // 4x4
    // planes
    map[1][1] = plane;
    map[1][2] = plane;
    map[2][1] = plane;
    // stacked blocks
    map[0][0] = [ simple, simple ];
    map[1][0] = [ plane, plane, plane ];
    map[0][1] = [ plane, plane, plane ];
    map[0][2] = [ simple, simple ];
    map[2][0] = [ simple, simple ];
    map[0][3] = [ simple, simple, simple ];
    map[3][0] = [ simple, simple, simple ];
    var mapEntity = Crafty.isometric.placeTileMap(size, map);

    // "TOWER OF POWER" TILE SUBMAP
    towerMap = [ [], [], [], [] ]; // 4 x 4
    towerMap[1][1] = [ big, big, big, big, big ];
    towerMap[2][3] = simple;
    towerMap[3][3] = simple;
    towerMap[3][2] = simple;
    towerMap[3][1] = [null, simple];
    towerMap[3][0] = [null, simple];
    towerMap[2][0] = [null, simple];
    towerMap[1][0] = [null, null, simple];
    towerMap[0][0] = [null, null, simple];
    towerMap[0][1] = [null, null, simple];
    towerMap[0][2] = [null, null, null, simple];
    towerMap[0][3] = [null, null, null, simple];
    towerMap[1][3] = [null, null, null, simple];
    var tower = Crafty.isometric.placeTileMap(size, towerMap);
    tower.attr({ x: 7 * size, y: 7 * size });
    mapEntity.attach(tower);


    // DRAGGABLE TILES
    Crafty("TILE").each(function() {
        var iso = this._isoDisplay;

        iso.bind("Click", function(e) {
            var ctrl = this._isoController;
            console.log("You clicked at [" + ctrl._x/size + "][" + ctrl._y/size + "][" + ctrl._z/size + "]");
        });
    });



    // PLAYER
    var playerEntity = Crafty.e("2D, Multiway, Collision3D, Isometric")
        .attr({ x: 1 * size, y: 1 * size, z: 0 * size,
                w: 1 * size, h: 1 * size, d: 1 * size })
        .collision(1,1, size-1,1, size-1,size-1, 1,size-1)
        .bind("Moved", function(evt) {
            if (this.hit3D('Solid')) {
                this[evt.axis] = evt.oldValue;
            }
        })
        .multiway(100, {
            UP_ARROW: -135, W: -135,
            DOWN_ARROW: 45, S: 45,
            RIGHT_ARROW: -45, D: -45,
            LEFT_ARROW: 135, A: 135
        })
        .bind("KeyDown", function(e) {
            if (e.key === Crafty.keys.SPACE)
                this.z += size;
            else if (e.key === Crafty.keys.CTRL)
                this.z -= size;
        })
        .isometric("2D, DOM, player");
    mapEntity.attach(playerEntity);


    // VIEWPORT
    Crafty.viewport.clampToEntities = false;
    Crafty.viewport.follow(playerEntity._isoDisplay);

    // VIEWPORT ROTATIONS
    var keyRotations = {};
    keyRotations[Crafty.keys.NUMPAD_4] = 90;
    keyRotations[Crafty.keys.NUMPAD_8] = 0,
    keyRotations[Crafty.keys.NUMPAD_6] = -90,
    keyRotations[Crafty.keys.NUMPAD_2] = -180
    mapEntity.bind("KeyDown", function(e) {
        var rotation = keyRotations[e.key];
        if (typeof rotation !== "undefined") {
            this.rotation = rotation;
        }
    });
    </script>
  </body>
</html>
